<template>
  <div class="page">
    <!-- <div class="head">
      <van-icon @click="goback" class="back-icon" name="arrow-left" />
      <Title></Title>
    </div> -->
    <div class="base-info">
      <p class="tit">
        <span>{{ this.dataInfo.METHOD || '-' }}({{ this.dataInfo.YEAR || '-' }}年)</span>
        <!-- <span class="more">已办结</span> -->
      </p>
      <p class="subtit">
        <span>违规事项：<span>{{ this.dataInfo.PROBLEM || '-' }}</span></span>
      </p>
      <p class="subtit" v-if="$route.query.type == 2">
        <span style="padding-right: 20px;">派发人：<span>{{ this.dataInfo.EMPE_NM || '-' }}</span></span>
        <span>派发时间：<span>{{ this.dataInfo.TM || '-' }}</span></span>
      </p>
      <div class="con">
        <p class="row">
          <span class="row-tit">违规内容：</span>
          <span class="con-col">{{ this.dataInfo.DESCRIPTION || '-' }}
          </span>
        </p>
        <p class="row">
          <span class="row-tit">工作建议：</span>
          <span class="con-col">{{ this.dataInfo.ADVICE || '-' }}</span>
        </p>

      </div>
    </div>
    <div class="timer" v-if="$route.query.type == 2 && timerVal > 0">
      <p><span>学习倒计时(<span>{{ timerVal }}</span>s)</span></p>
    </div>

  </div>
</template>

<script>

import Title from '@/components/commonTitle.vue'
import { Dialog } from 'vant';
import { getCaseData } from '@/api/case';

export default {
  name: 'caseDetail',
  components: { Title, },
  data() {
    return {
      dataInfo: {},
      timerVal: 10,
      timer: null,
      isShowTimer: false, // todo 标记一个状态显示底部倒计时，可能需要从接口获取？？
    }
  },
  created() {
    this.handleTimer()
    this.getInfo()
  },
  watch:{
   '$route.query.id'(val){
    // console.log(val,'----val');
    if(val) this.getInfo()
   } 
  },
  methods: {
    async getInfo() {
      let qrydata = {
        NUM_STYPE: '1',
        VAR_ID: this.$route.query.id || ''
      }
      let qry = {
        code: '80306',
        pagenum: 0,
        pagesize: 10,
        params: JSON.stringify(qrydata)
      }
      const res = await getCaseData(qry)
      if (!res || !res.data) return
      this.dataInfo = res.data.VALUE_LIST[0]
      console.log(this.dataInfo);

    },
    handleTimer() {
      this.timer = setInterval(() => {
        // console.log(this.timerVal, '----timerVal', this.timer);
        if (this.timerVal < 1) return clearInterval(this.timer)
        --this.timerVal
      }, 1000)

    },
    goback() {
      // console.log(this.$route.query.activeType, '---');
      if (this.$route.query.type == 2 && this.timerVal > 0) {
        console.log('567890');
        Dialog.confirm({
          // title: '标题',
          message: '还未学习完，是否返回',
          confirmButtonText: '否',
          cancelButtonText: '是',
          confirmButtonColor: '#397FF9'
        })
          .then(() => {
            // todo 要不要更新状态发请求？？

          })
          .catch(() => {
            this.$router.push({
              path: '/',
              query: {
                active: this.$route.query.activeType
              }
            })
          });

      } else {
        this.$router.push({
          path: '/',
          query: {
            active: this.$route.query.activeType
          }
        })
      }
    }

  },
  destroyed() {
    clearInterval(this.timer)
  }

}
</script>

<style lang="less" scoped>
.page {
  height: 100%;
  background: #fff;
  overflow: hidden;

  .head {
    position: relative;
    // height: 100px;
    // line-height: 100px;

    .back-icon {
      position: absolute;
      left: 30px;
      z-index: 999;
      font-size: 28px;
      line-height: 100px;
      color: #fff;
      cursor: pointer;
      width: 50px;
    }
  }

  .base-info {
    padding: 30px;
    // border: 1px solid #ebedf0;
    // margin-bottom: 30px;
    // height: calc(100% - 247px);
    overflow: auto;

    &:last-child {
      margin-bottom: 0;
    }

    .tit {
      display: flex;
      justify-content: space-between;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 500;
      font-size: 28px;
      color: #333333;
      // line-height: 42px;
      // height: 48px;
      padding-bottom: 30px;

      .more {
        font-size: 26px;
        color: #7F8389;
      }
    }

    .subtit {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 26px;
      color: #5A4F4F;
      // line-height: 40px;
      padding-bottom: 24px;
    }

    .con {
      border-top: 1px solid #DEDEDE;
      // display: flex;
      // flex-direction: column;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 26px;
      color: #5A4F4F;
      padding-top: 20px;

      .row {
        width: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        // min-height: 56px;
        // line-height: 40px;
        margin-bottom: 44px;

        &:last-child {
          margin-bottom: 0;
        }

        .row-tit {
          // width: 132px;
          // display: inline-block;
        }

        .con-col {
          color: #7F8389;
          // display: -webkit-box;
          // -webkit-box-orient: vertical;
          // -webkit-line-clamp: 3;
          // overflow: hidden;
          line-height: 40px;
        }
      }
    }
  }

  .timer {
    // width: 100%;
    height: 76px;
    line-height: 76px;
    background: #397FF9;
    color: #fff;
    text-align: center;
    margin: 0 30px;
    border-radius: 10px;
    // position: absolute;
    // bottom: 0;
    // left: 0;

    p {
      span {
        display: inline-block;
        vertical-align: middle;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 500;
        font-size: 32px;
        color: #FFFFFF;
        // line-height: 76px;
      }
    }

  }
}
</style>